<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">编辑管理员</Col>
       </Row>
       <div class="table-box" style="overflow: auto;">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input v-model="formValidate.name" placeholder="输入名称"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="formValidate.password" type="password" placeholder="输入密码"></Input>
                </FormItem>
                <FormItem label="密码" prop="surePassword">
                    <Input v-model="formValidate.surePassword" type="password" placeholder="重复输入密码"></Input>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="formValidate.email" type="email" placeholder="输入邮箱"></Input>
                </FormItem>
                <FormItem label="类型">
                    <Select v-model="formValidate.type" placeholder="请选择">
                        <Option v-for="(item, index) in userType" :key="index" :value="index">{{item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="角色组">
                    <Select v-model="formValidate.roleId" :placeholder="roleName">
                        <Option v-for="(item, index) in roleArr" :key="index" :value="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交修改</Button>
                </FormItem>
            </Form>
       </div>
    </div>
</template>
<script>
    import md5 from 'md5'

    export default {
        data () {
            var params = this.$route.query;

           return {
                userType: this.$fieldType.userType,
                roleArr: [],
                roleName: params.role_name,
                formValidate: {
                    id: parseInt(params.id),
                    name: params.name,
                    password: '',
                    surePassword: '',
                    email: params.email,
                    type: parseInt(params.type),
                    roleId: parseInt(params.role_id)
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '不能为空！', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '不能为空！', trigger: 'blur' },
                        { type: 'string', min: 5, message: '字数不能少于5！', trigger: 'blur' }
                    ],
                    surePassword: [
                        { required: true, message: '不能为空！', trigger: 'blur' },
                        { type: 'string', min: 5, message: '字数不能少于5！', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '不能为空！', trigger: 'blur' }
                    ]
                }
           };
        },
        created: function () {
            // 获取角色组列表信息
            this.getRoleList();
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var that = this;
                        // 判断两次密码是否一致
                        if(that.formValidate.password !== that.formValidate.surePassword){
                            that.$Message.info('两次输入的密码不一致！');
                        } else {
                            that.$loading.show('添加中');
                            that.$util.ajax({
                                that: that,
                                url: '/admin/edit/',
                                data: {
                                    id: that.formValidate.id,
                                    name: that.formValidate.name,
                                    password: md5(that.formValidate.password),
                                    email: that.formValidate.email,
                                    type: that.formValidate.type,
                                    roleId: that.formValidate.roleId
                                },
                                success: function(data){
                                    that.$router.go(-1);
                                },
                                fail: function(msg){
                                    that.$Message.info(msg);
                                },
                                complete: function(){
                                    that.$loading.hide();
                                }
                            });
                        }
                    }
                })
            },
            // 获取菜单信息列表
            getRoleList(){
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/role/rolelist/',
                    success: function(data){
                        that.roleArr = data.data;
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function (){
                        that.$loading.hide();
                    }
                })
            }
        }
    }
</script>
<style scoped>

</style>